<template>
  <div class="header">
    <div class="leftmenu">
      <!-- <ul> -->
      <!-- <li> -->
      <div>
        <svg
          t="1611357589373"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          height="22"
          width="22"
          p-id="771"
        >
          <path
            d="M66.488889 211.781818h891.022222c28.198788 0 50.980202-22.238384 50.980202-49.648485 0-27.397172-22.768485-49.648485-50.980202-49.648485H66.488889C38.341818 112.484848 15.508687 134.723232 15.508687 162.133333s22.833131 49.648485 50.980202 49.648485z m891.009293 248.242424H66.488889C38.277172 460.024242 15.508687 482.262626 15.508687 509.672727s22.768485 49.648485 50.980202 49.648485h891.022222c28.198788 0 50.980202-22.238384 50.980202-49.648485-0.012929-27.410101-22.923636-49.648485-50.993131-49.648485z m0 351.63798H66.488889c-28.134141 0-50.980202 22.238384-50.980202 49.648485s22.833131 49.648485 50.980202 49.648485h891.022222c28.198788 0 50.980202-22.238384 50.980202-49.648485-0.012929-27.397172-22.781414-49.648485-50.993131-49.648485z m0 0"
            p-id="772"
            fill="#deebff"
          ></path>
        </svg>
      </div>
      <!-- </li> -->
      <div class="wiki-logo">MINI-WIKI</div>
      <div>人员</div>
      <div>空间</div>
      <div>
        <button class="create-btn">创建</button>
      </div>
      <!-- </ul> -->
    </div>
    <div class="rightmenu">
      <div class="input-search">
        <input type="text" placeholder="搜索" />
        <svg
          t="1611580026664"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="9955"
          width="22"
          height="22"
        >
          <path
            d="M446.112323 177.545051c137.567677 0.219798 252.612525 104.59798 266.162424 241.493333 13.562828 136.895354-78.778182 261.818182-213.617777 289.008485-134.852525 27.203232-268.386263-52.156768-308.945455-183.608889s25.018182-272.252121 151.738182-325.779394A267.235556 267.235556 0 0 1 446.112323 177.545051m0-62.060607c-182.794343 0-330.989899 148.195556-330.989899 330.989899s148.195556 330.989899 330.989899 330.989899 330.989899-148.195556 330.989899-330.989899-148.195556-330.989899-330.989899-330.989899z m431.321212 793.341415a30.849293 30.849293 0 0 1-21.94101-9.102223l-157.220202-157.220202c-11.752727-12.179394-11.584646-31.534545 0.37495-43.50707 11.972525-11.972525 31.327677-12.140606 43.494141-0.37495l157.220202 157.220202a31.036768 31.036768 0 0 1 6.723232 33.810101 31.004444 31.004444 0 0 1-28.651313 19.174142z m0 0"
            p-id="9956"
            fill="#242323"
          ></path>
        </svg>
      </div>
      <div>
        <svg
          t="1611362512656"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="8016"
          width="22"
          height="22"
        >
          <path
            d="M954.583 783.03h-68.09V442.584c0-194.498-150.274-355.513-340.448-372.86V34.046C546.045 15.32 530.725 0 512 0s-34.045 15.32-34.045 34.045v35.679C287.781 87.07 137.507 248.084 137.507 442.583V783.03h-68.09a34.045 34.045 0 1 0 0 68.09h885.166a34.045 34.045 0 1 0 0-68.09zM512 1024a102.645 102.645 0 0 0 102.662-102.662H409.338A102.645 102.645 0 0 0 512 1024z"
            p-id="8017"
            fill="#deebff"
          ></path>
        </svg>
      </div>
      <div>
        <svg
          t="1611362799558"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="8958"
          width="25"
          height="25"
        >
          <path
            d="M512.956791 960.931592C266.363534 961.478038 64.969711 761.176083 64.479547 514.885723 63.98836 268.25051 264.216637 66.960041 510.574534 66.424852c245.564835-0.533143 447.856098 199.584618 448.462918 443.646216C959.656553 758.954485 760.363577 960.3831 512.956791 960.931592zM139.877771 517.064342c0.437975 206.380394 166.535921 372.055714 372.986923 372.036271 205.638497-0.019443 373.173165-167.17037 373.372709-372.517225C886.438994 310.307372 718.076472 142.700049 511.166005 143.194306 305.298288 143.68447 139.440819 310.697251 139.877771 517.064342z"
            p-id="8959"
            fill="#deebff"
          ></path>
          <path
            d="M533.706371 610.072643c-28.453029 0-52.5611 0-78.629825 0-8.176217-49.873897 2.848884-92.693122 40.473807-127.700427 13.622252-12.674671 27.497261-25.355481 39.222303-39.698141 7.992021-9.776667 14.149255-21.878287 18.140149-33.929764 8.40646-25.38311-3.360538-53.949726-24.848944-64.948221-22.3838-11.456936-50.65161-5.606695-67.99972 15.589047-7.039323 8.599865-12.148691 19.075451-16.686031 29.339212-4.205788 9.514701-6.478552 19.883863-10.524704 32.82357-29.947056-7.268544-59.390645-14.414291-90.285283-21.913079 10.208503-58.411341 31.146371-108.754936 87.706551-132.638903 60.505026-25.549909 122.591059-26.342971 179.231057 10.735505 52.072983 34.089399 66.654073 117.146047 31.156604 172.232666-13.338796 20.700461-31.6877 39.1036-50.724265 54.993498C557.223994 532.264533 526.186094 559.103808 533.706371 610.072643z"
            p-id="8960"
            fill="#deebff"
          ></path>
          <path
            d="M543.036877 756.13323c-33.396621 0-64.593134 0-97.456612 0 0-33.579793 0-66.103534 0-100.111069 32.640398 0 64.35368 0 97.456612 0C543.036877 689.488367 543.036877 721.383798 543.036877 756.13323z"
            p-id="8961"
            fill="#deebff"
          ></path>
        </svg>
      </div>

      <div>
        <svg
          t="1611362002824"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4394"
          width="26"
          height="26"
        >
          <path
            d="M511.3 512.2m-447.3 0a447.3 447.3 0 1 0 894.6 0 447.3 447.3 0 1 0-894.6 0Z"
            fill="#BABABA"
            p-id="4395"
          ></path>
          <path
            d="M513 383.8m-128 0a128 128 0 1 0 256 0 128 128 0 1 0-256 0Z"
            fill="#FFFFFF"
            p-id="4396"
          ></path>
          <path
            d="M771.1 767.3V691c0-63.7-52.1-115.8-115.8-115.8H374.8C311.1 575.2 259 627.3 259 691v76.3h512.1z"
            fill="#FFFFFF"
            p-id="4397"
          ></path>
        </svg>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
};
</script>

<style lang="scss">
.header {
  display: flex;
  justify-content: space-between;
  // justify-content: center;
  align-items: center;
  width: 100%;
  height: 60px;
  background-color: #333333;
  color: #deebff;

  .leftmenu {
    display: flex;
    height: 60px;
    div {
      height: 60px;
      padding: 0 15px;
      margin: 0 5px;
      font-size: 19px;
      line-height: 60px;
      border: none;
      .icon {
        margin-top: 18px;
      }
    }
    div:hover {
      background-color: #242323;
    }
    .wiki-logo {
      font-size: 25px;
    }
    .create-btn {
      width: 85px;
      height: 46px;
      line-height: 46px;
      font-size: 19px;
      font-weight: 600;
      margin-top: 8px;
      border: none;
      outline: none;
      border-radius: 5px;
      color: #deebff;
      background-color: #009933;
    }
    .create-btn:hover {
      background-color: #2da355;
    }
  }
  .rightmenu {
    display: flex;
    height: 60px;
    div {
      height: 60px;
      padding: 0 15px;
      margin: 0 5px;
      font-size: 19px;
      line-height: 60px;
      border: none;
    }
    .icon {
      margin-top: 18px;
      :nth-child(1) {
        margin-top: 22px;
      }
    }
    div:hover {
      background-color: #242323;
    }
    input {
      border: none;
      outline: none;
      padding: 6px;
      width: 150px;
      background-color: #d3d3d3;
      border-radius: 2px;
      height: 19px;
      width: 182px;
    }
    .input-search{
      position: relative;
      .icon{
        position: absolute;
        left: 178px;
        top: 3px;
      }
    }
  }
}
</style>